<template>
  <div class="shade-wrap" id="shadeWrap">
    <div v-if="detailAll.applet_item_detail_dz == 1" @click="backPage" class="arrow-wrap" :style="{top:menuBtnBounding.top+'px', height:menuBtnBounding.height+'px'}">
      <img src="https://img.wifenxiao.com/h5-wfx/images/sideWidget/sideWidget_up.png" class="arrow-back">
    </div>
    <div :style="{top:(detailAll.applet_item_detail_dz == 1 ? menuBtnBounding.bottom+'px' : 0)}" class="shade-wrap-icon has_comment clearfix" v-if="topInfo && topInfo.is_comment==1">
      <!-- 供应商店铺首页 -->
      <!-- TODO 点击返回首页暂时不上 -->
      <div class="shade-wrap-icon-item shadeItem shop" v-if="topInfo.supplier_index_link && !topInfo.is_close_item_shop" @click="linkTo(topInfo.supplier_index_link)">
        <div class="icon-top home"></div>
      </div>
      <!-- 总部店铺首页 -->
      <div class="shade-wrap-icon-item shadeItem supplier" v-else-if="!topInfo.is_close_item_shop" @click="linkTo(topInfo.index_link)">
        <div class="icon-top home"></div>
      </div>

      <div class="shade-wrap-icon-item shadeItem fr">
        <div class="icon-top member" @click="JumpName('member')">
        </div>
      </div>
      <div class="shade-wrap-icon-item shadeItem fr" v-if="topInfo.user_need_open_store_gift!=1">
        <div class="icon-top cart" @click="JumpName('shop-car')">
        </div>
      </div>
      <div class="shade-wrap-icon-item shadeItem fr">
        <div class="icon-top qrcode" @click="shareGoods">
        </div>
      </div>
    </div>
    <!-- 后台：商品评价--关闭后商品详情页将不显示评价和顶部主页按钮 -->
    <div :style="{top:(detailAll.applet_item_detail_dz == 1 ? menuBtnBounding.bottom+'px' : 0)}" class="shade-wrap-icon no_comment clearfix" v-else>
      <div class="shade-wrap-icon-item shadeItem fr">
        <div class="icon-top member" @click="JumpName('member')">
        </div>
      </div>
      <div class="shade-wrap-icon-item shadeItem fr" v-if="topInfo.is_detail_code==1 && topInfo.item_qrcode_is_pull_down!=1" @click="showGoodsCode">
        <div class="icon-top code">
          <!-- <svg-icon icon-class="icon_ewm" /> -->
        </div>
      </div>
      <div class="shade-wrap-icon-item shadeItem fr" @click="shareGoods">
        <div class="icon-top qrcode">
          <!-- <svg-icon icon-class="icon_ewm" /> -->
        </div>
      </div>
    </div>

    <div class="shade-wrap-nav" id="shadeWrapNav" v-if="topInfo && topInfo.is_comment==1">
      <!-- <div class="shade-wrap-nav-icon">
        <div class="left" v-if="topInfo.supplier_index_link && !topInfo.is_close_item_shop" @click="linkTo(topInfo.supplier_index_link)"><img src="https://img.wifenxiao.com/h5-wfx/images/item/detail/nav_icon1.png" alt=""></div>
        <div class="left" v-else-if="!topInfo.is_close_item_shop" @click="linkTo(topInfo.index_link)"><img src="https://img.wifenxiao.com/h5-wfx/images/item/detail/nav_icon1.png" alt=""></div>
        <div class="right">
          <div v-if="topInfo.user_need_open_store_gift!=1"  @click="JumpName('shop-car')"><img src="https://img.wifenxiao.com/h5-wfx/images/item/detail/nav_icon2.png" alt=""></div>
          <div v-if="topInfo.is_detail_code==1 && topInfo.item_qrcode_is_pull_down!=1" @click="showGoodsCode"><img src="https://img.wifenxiao.com/h5-wfx/images/item/detail/nav_icon3.png" alt=""></div>
          <div class=""><img src="https://img.wifenxiao.com/h5-wfx/images/item/detail/nav_icon4.png" alt=""></div>
        </div>
      </div> -->
      <div class="shade-wrap-nav-box">
        <div
          :class="item.active ? 'active': ''"
          class="shade-wrap-nav-box-item"
          @click="handleScrollTo(item, index)"
          v-for="(item, index) in navList"
          :key="index">
          <span class="icons"><!-- <svg-icon icon-class="icon_address" /> --></span>
          <span class="text">{{ item.label }}</span>
        </div>
      </div>
    </div>
    <!-- 关闭后台商品评价开关项，但有商品素材时 -->
    <div class="shade-wrap-nav has_material" id="shadeWrapNav" v-else-if="topInfo && topInfo.has_material==1">
      <div class="shade-wrap-nav-box">
        <div
          :class="item.active ? 'active': ''"
          class="shade-wrap-nav-box-item"
          @click="materialHandleScrollTo(item, index)"
          v-for="(item, index) in materialNavList"
          :key="index">
          <span class="icons"><!-- <svg-icon icon-class="icon_address" /> --></span>
          <span class="text">{{ item.label }}</span>
        </div>
      </div>
    </div>

    <!-- 商品分享二维码弹窗 -->
    <goods-code :visible.sync="codeDialogVisible" :codeData="topInfo.qrcode"></goods-code>
    <!-- 发圈素材按钮 -->
    <material v-if="detailAll.has_material == 1" @materialScroll="materialScroll"></material>
    <!-- ST 自定义分享 -->
    <god-share-cpt ref="god-share-cpt" @share="shareGoods"></god-share-cpt>
    <!-- ED 自定义分享 -->
  </div>
</template>

<script>
import Vue from 'vue'
/**
   * @Author: yqe@360shop.cn
   * @Date: 2019-12-09 10:21:52
 * @Last Modified by: zhangmeng
 * @Last Modified time: 2020-12-17 14:34:13
   */

import goodsCode from '../../../components/goodsCode'
import GodShareCpt from '@/components/god/god-share'
import material from '../material'
import { openPage } from '@/utils/utils.js'
import { wxItemQrCode } from '@/api/small/common'

export default Vue.extend({
  name: 'index',
  components: {
    goodsCode,
    GodShareCpt,
    material
  },
  props: {
    topInfo: {
      user_need_open_store_gift: 0
    },
    detailAll: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      navList: [
        {
          label: '商品',
          type: 'goods',
          active: true
        },
        {
          label: '评价',
          type: 'comment',
          active: false
        },
        {
          label: '详情',
          type: 'detail',
          active: false
        }
      ],
      materialNavList: [
        {
          label: '商品',
          type: 'goods',
          active: true
        },
        {
          label: '转发素材',
          type: 'material',
          active: false
        }
      ],
      codeDialogVisible: false,
      menuBtnBounding: {}
    }
  },
  watch: {
    'topInfo.showTj': 'topInfoMenu',
    'topInfo.has_material': 'topInfoMenu'
  },
  created() {
    this.topInfoMenu()
  },
  mounted() {
    // 显示顶部导航时
    if (this.topInfo.is_comment == 1 || this.topInfo.has_material == 1) {
      window.addEventListener('scroll', this.handleScroll, false) // 监听（绑定）滚轮滚动事件
      setTimeout(() => {
        // document.documentElement.scrollTop = 0
        window.scrollTo(0, 0)
      }, 300)
    }
    const res = wx.getMenuButtonBoundingClientRect()
    this.menuBtnBounding = res
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll, false) // 移除监听
  },
  methods: {
    backPage() {
      let pages = getCurrentPages() || [];
      if(pages.length > 1) {
        wx.navigateBack({
          delta: 1
        })
      } else {
        this.JumpName('index')
      }  
    },
    topInfoMenu() {
      const tj = {
        label: '推荐',
        type: 'Tj',
        active: false
      }
      const material = {
        label: '转发素材',
        type: 'material',
        active: false
      }
      // 从数据开始整理将多种条件的数据全部整理，是否开启评价，推荐，转发素材，因为数据是有序的所以需要针对位置进行处理
      if (this.topInfo.is_comment == 1) { // 开启评价
        if (this.topInfo.has_material) { // 是否开启了转发素材
          this.navList.splice(1, 0, material)
        }
        if (this.topInfo.showTj) { // 开启推荐
          this.navList.push(tj)
        }
      } else {
        if (this.topInfo.has_material) { // 是否开启了转发素材
          this.navList.splice(1, 1, material)
        } else {
          this.navList.splice(1, 1)
        }
      }
    },
    JumpName(url, data) {
      this.$JumpName(this, url, data)
    },
    linkTo(url) {
      openPage(url)
    },
    // 分享商品二维码
    shareGoods() {
      this.$loadingWrap.show()
      wxItemQrCode({ item_id: this.detailAll.item_detail.item_id, activity: this.detailAll.activity }).then((res) => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.topInfo.qrcode = res.data.path
          this.codeDialogVisible = true
        } else {
          this.$Error(res.msg)
        }
      })
    },
    /**
       * 滚动事件
       */
    handleScroll() {
      // TODO 小程序获取各种高度
      const that = this
      document.body.$$getBoundingClientRect().then((res) => {
        const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
        const detailComment = document.getElementById('detailComment')
        const detailWrap = document.getElementById('detailWrap')
        const detailTj = document.getElementById('detailTj')
        const detailMaterial = document.getElementById('detailMaterial')
        let offsetTopComment = 0 // div 到头部的距离
        let offsetTopDetail = 0
        let offsetTopTj = 0
        let offsetMaterial = detailMaterial ? 0 : 10000000
        const scrollY = res.scrollTop

        // 商品详情页滑动显示顶部导航
        let iconColor
        let opacity = parseFloat(scrollY) / 270
        let opacity_opposite = 1 - opacity
        let opacitys = 1 - opacity
        if (scrollY >= 270) {
          opacity = 0.95
          iconColor = '#666'
        }
        if (opacity_opposite >= 0.6) {
          opacity_opposite = 0.6
          iconColor = '#fff'
        }
        if (opacitys == 0) {
          opacitys = 0
        }
        if (opacitys == 1) {
          document.getElementsByClassName('shade-wrap-icon')[0].style.display = 'block' // 图标
        } else {
          document.getElementsByClassName('shade-wrap-icon')[0].style.display = 'none' // 图标
        }
        document.getElementById('shadeWrap').style.backgroundColor = `rgba(255,255,255,${opacity})` // 大背景
        if (document.getElementById('shadeWrapNav')) {
          document.getElementById('shadeWrapNav').style.opacity = opacity // 图片
        }

        // 如果没有开启商品评价,但有商品素材时
        if (that.topInfo && that.topInfo.is_comment != 1 && that.topInfo.has_material == 1) {
          if (detailMaterial) {
            const scrollTop = 50
            detailMaterial.$$getBoundingClientRect().then((res4) => {
              offsetMaterial = res4.top
              // if (scrollTop < offsetTopDetail) {
              //   that.materialHandleScrollTo({}, 0, true)
              // } else {
              //   that.materialHandleScrollTo({}, 1, true)
              // }

              if (scrollTop < offsetMaterial) {
                that.materialHandleScrollTo({}, 0, true)
              } else if (scrollTop >= offsetMaterial && scrollTop < offsetTopDetail) {
                that.materialHandleScrollTo({}, 1, true)
              } else if (scrollTop >= offsetTopDetail) {
                that.materialHandleScrollTo({}, 2, true)
              }
            })
          }
          return false
        }

        detailComment.$$getBoundingClientRect().then((res1) => {
          detailWrap.$$getBoundingClientRect().then((res2) => {
            offsetTopComment = res1.top
            offsetTopDetail = res2.top
            if (detailTj) {
              detailTj.$$getBoundingClientRect().then((res3) => {
                offsetTopTj = res3.top
                if (detailMaterial) {
                  detailMaterial.$$getBoundingClientRect().then((res4) => {
                    offsetMaterial = res4.top
                    handleS(that)
                  })
                } else {
                  handleS(that)
                }
              })
            } else if (detailMaterial) {
              detailMaterial.$$getBoundingClientRect().then((res4) => {
                offsetMaterial = res4.top
                handleS(that)
              })
            } else {
              handleS(that)
            }
            function handleS(that) {
              // scrollTop要大于45 因为可能有1像素误差
              const scrollTop = 50

              if (detailTj) {
                if (scrollTop < offsetMaterial) {
                  that.handleScrollTo({}, 0, true)
                } else if (scrollTop >= offsetMaterial && scrollTop < offsetTopComment) {
                  that.handleScrollTo({}, 1, true)
                } else if (scrollTop >= offsetTopComment && scrollTop < offsetTopDetail) {
                  that.handleScrollTo({}, 2, true)
                } else if (scrollTop >= offsetTopDetail && scrollTop < offsetTopTj) {
                  that.handleScrollTo({}, 3, true)
                } else if (scrollTop >= offsetTopTj) {
                  that.handleScrollTo({}, 4, true)
                }
              } else if (detailMaterial) {
                if (scrollTop < offsetMaterial) {
                  that.handleScrollTo({}, 0, true)
                } else if (scrollTop >= offsetMaterial && scrollTop < offsetTopComment) {
                  that.handleScrollTo({}, 1, true)
                } else if (scrollTop >= offsetTopComment && scrollTop < offsetTopDetail) {
                  that.handleScrollTo({}, 2, true)
                } else if (scrollTop >= offsetTopDetail) {
                  that.handleScrollTo({}, 3, true)
                }
              } else if (scrollTop < offsetTopComment) {
                that.handleScrollTo({}, 0, true)
              } else if (scrollTop >= offsetTopComment && scrollTop < offsetTopDetail) {
                that.handleScrollTo({}, 1, true)
              } else if (scrollTop >= offsetTopDetail) {
                that.handleScrollTo({}, 2, true)
              }
            }
          })
        })
      })
    },
    /**
       * 点击导航滚动
       */

    // 如果关闭了商品评价且有商品素材
    materialHandleScrollTo(item, index, flag) {
      // TODO 小程序处理
      const that = this
      let scrollTop = 0
      const detailMaterial = document.getElementById('detailMaterial')
      const detailWrap = document.getElementById('detailWrap')
      let offsetMaterial = 0
      let offsetTopDetail = 0
      document.body.$$getBoundingClientRect().then((res) => {
        if (detailMaterial) {
          detailMaterial.$$getBoundingClientRect().then((res4) => {
            detailWrap.$$getBoundingClientRect().then((res2) => {
              offsetTopDetail = res2.top
              offsetMaterial = res4.top
              handleMaterial(that)
            })
          })
        }
        function handleMaterial(that) {
          switch (item.type) {
            case 'goods':
              scrollTop = 0
              break
            case 'material':
              scrollTop = offsetMaterial + res.scrollTop - 45
              break
            case 'detail':
              scrollTop = offsetTopDetail + res.scrollTop - 45
              break
          }
          if (!flag) {
            wx.pageScrollTo({
              scrollTop,
              duration: 300
            })
          }
          that.materialNavList.forEach((item, num) => {
            that.$set(that.materialNavList[num], 'active', false)
          })
          that.$set(that.materialNavList[index], 'active', true)
          that.$forceUpdate()
        }
      })
    },
    handleScrollTo(item, index, flag) {
      // TODO 小程序处理
      const that = this
      // if (!this.topInfo.showTj && index == 3) {
      //   return false
      // }
      let scrollTop = 0
      const detailComment = document.getElementById('detailComment')
      const detailWrap = document.getElementById('detailWrap')
      const detailTj = document.getElementById('detailTj')
      const detailMaterial = document.getElementById('detailMaterial')
      let offsetTopComment = 0 // div 到头部的距离
      let offsetTopDetail = 0
      let offsetTopTj = 0
      let offsetMaterial = detailMaterial ? 0 : 10000000
      document.body.$$getBoundingClientRect().then((res) => {
        detailComment.$$getBoundingClientRect().then((res1) => {
          detailWrap.$$getBoundingClientRect().then((res2) => {
            offsetTopComment = res1.top
            offsetTopDetail = res2.top
            if (detailTj) {
              detailTj.$$getBoundingClientRect().then((res3) => {
                offsetTopTj = res3.top
                if (detailMaterial) {
                  detailMaterial.$$getBoundingClientRect().then((res4) => {
                    offsetMaterial = res4.top
                    handleT(that)
                  })
                } else {
                  handleT(that)
                }
              })
            } else if (detailMaterial) {
              detailMaterial.$$getBoundingClientRect().then((res4) => {
                offsetMaterial = res4.top
                handleT(that)
              })
            } else {
              handleT(that)
            }
            function handleT(that) {
              // TODO 小程序用的top是scrollTop 所以需要加上body滚动的高度 45是顶部的高度
              switch (item.type) {
                case 'goods':
                  scrollTop = 0
                  break
                case 'comment':
                  scrollTop = offsetTopComment + res.scrollTop - 45
                  break
                case 'detail':
                  scrollTop = offsetTopDetail + res.scrollTop - 45
                  break
                case 'Tj':
                  scrollTop = offsetTopTj + res.scrollTop - 45
                  break
                case 'material':
                  scrollTop = offsetMaterial + res.scrollTop - 45
                  break
              }
              if (!flag) {
                wx.pageScrollTo({
                  scrollTop,
                  duration: 300
                })
              }
              that.navList.forEach((item, num) => {
                that.$set(that.navList[num], 'active', false)
              })
              that.$set(that.navList[index], 'active', true)
              that.$forceUpdate()
            }
          })
        })
      })
    },

    // 商品二维码
    showGoodsCode() {
      this.$refs['god-share-cpt'].show(this.detailAll)
    },
    // 点击素材悬浮按钮
    materialScroll() {
      const material = {
        type: 'material',
        active: true
      }
      this.handleScrollTo(material, 1)
    }
  }
})
</script>

<style lang="scss">
  @import "src/styles/mixin";
  @import "src/styles/variables";
  .shade-wrap{
    position: fixed;
    z-index: 1200;
    width: 100%;
    /*background: rgba(255, 255, 255, 1);*/
    box-sizing: border-box;
    .arrow-wrap {
      left: 40px;
      width: 60px;
      position: fixed;
      z-index: 1000;
      border-radius: 20px;
      background-color: rgba(50, 50, 50, 0.6);
      .arrow-back {
        width: 24rpx;
        height: 40rpx;
        left: 18rpx;
        position: relative;
        top: 14rpx;
      }
    }
    &-icon{
      position: relative;
      padding: 20px 0;
      &-item{
        width: 66px;
        height: 66px;
        background: rgba(0,0,0, 0.4);
        border-radius: 50%;
        display: inline-block;
        margin-right: 20px;
        color: #666;
        &:first-child{
          margin-left: 20px;
        }
        .icon-top{
          /* color: #fff;
          line-height: 60px;
          text-align: center;
          font-size: 36px;
          &.home{
            font-size: 40px;
          } */
          width:36px;
          height:36px;
          margin:14px auto 0;
          background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/home.png") no-repeat;
          background-size:100% 100%;
          &.member{
            background-image:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/member.png");
          }
          &.code{
            background-image:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/code.png");
          }
          &.cart{
            background-image:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/cart.png");
          }
          &.qrcode {
            background-image:url("https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/item/detail/qrcode.png");
          }
        }
      }
      .shade-wrap-img{
        position: absolute;
        width: 100%;
        text-align: center;
        top: 10px;
        opacity: 0;
        img{
          width: 80px;
          height: 80px;
          border-radius: 5px;
        }
      }
    }
    &-nav{
      margin-top: 10px;
      padding-bottom:20px;
      opacity: 0;
      &-icon {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
        padding: 20px 40px 15px;
        box-sizing: border-box;
        img {
          width: 36px;
          height: 36px;
        }
        .left {

        }
        .right {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          img {
            margin-left: 48px;
          }
        }
      }
      &-box {
        display: flex;
        flex-direction: row;
        &-item{
          position:relative;
          flex: 1;
          text-align: center;
          line-height: 60px;
          height: 60px;
          font-size: 0;
          &.active{
            .icons{
              position:absolute;
              bottom:0;
              left:50%;
              margin-left:-27px;
              width:54px;
              height:4px;
              @include gradient(right,rgba(242,11,34,1),rgba(242,11,34,0.1));
              // color: $warning;
              // display: inline-block;
              visibility: visible;
            }
            .text{
              font-size:28px;
              font-weight:bold;
            }
          }
          .icons{
            font-size: 40px;
            vertical-align: -4px;
            visibility: hidden;
          }
          .text{
            font-size: 26px;
          }
        }
      }
    }
  }
</style>
